<!doctype html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <title>飞机过滤器</title>

    <link rel="stylesheet" type="text/css" href="/css/ecalendar.css">
    <link rel="stylesheet" href="/css/vendor/common.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="/css/vendor/page-control.css">

    <link href="/css/vendor/common-grid.less" rel="stylesheet/less" type="text/css">
    <link href="/css/vendor/drone-filter.less" rel="stylesheet/less" type="text/css">
    <script src="/js/less.min.js"></script>
</head>

<body>

<main>
    <div class="filter-wrap">
        <div class="title-bar">
            <label>过滤器</label>
            <img class="filter-toggle-icon button rotate-180" onClick="droneFilter.clickFilterToggle(this)">
        </div>

        <div id="drone-filter">
            <div class="container">
                <div class="row clearfix">
                    <div class="col-md-4 col-sm-6">
                        <table>
                            <tr><th>server_id:</th><td><input type="text" value="JMIWUD"></td></tr>
                            <tr><th>用户昵称:</th><td><input type="text" value="JMIWUD"></td></tr>
                            <tr><th>手机号:</th><td><input type="text" value="JMIWUD"></td></tr>
                        </table>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <table>
                            <tr><th>飞机型号:</th><td><select><option>F1000</option><option>F200</option><option>F300</option></select></td></tr>
                            <tr><th>飞机序列号:</th><td><input type="text" value="18138288888"></td></tr>
                            <tr><th>飞机公里数:</th><td><input type="text" value="18138288888"></td></tr>
                        </table>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <table>
                            <tr><th>飞行时间:</th><td><input type="text" value="18138288888"></td></tr>
                            <tr>
                                <th>飞行时间:</th>
                                <td><input type="date-h" id="flight-date-start" value="2017/8/23">-<input type="date-h" id="flight-date-end" class="end" value="2017/8/23"></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div class="btn-0 button">重 置</div>
                                    <div class="btn-1 button">过 滤</div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="data-wrap">
        <!--    说明及要求:
                   1、列表标题和数据由两个table分离，目的是使得拖动数据时标题位置不变
                   2、标题列对应的数据列宽度一定要一致，且标题列的宽度一定要使得标题和排序图标在一行中显示完全
        -->
        <div class="table-title-wrap">
            <table class="title" cellpadding="0" cellspacing="0" border="1" bordercolor="#d8d8d8">
                <tr>
                    <th class="width-50"><input name="all" type="checkbox" checked></th>
                    <!-- 说明: selected属性使排序图片一直显示 sort属性设置排序方式，默认问降序desc  -->
                    <th class="width-150">server_id<img class="sort-icon" selected sort="asc"></th>
                    <th class="width-150">用户昵称<img class="sort-icon" sort="desc"></th>
                    <th class="width-150" >手机号<img class="sort-icon"></th>
                    <th class="width-150">飞行任务ID<img class="sort-icon"></th>
                    <!-- 预定义宽度类 width-s width-m width-b width-ud width-50 width-150 width-250 width-350 width-400 -->
                    <th class="width-150">飞行序列号<img class="sort-icon"></th>
                    <!-- 自定义宽度需要 添加类width-ud 然后定义width和min-width的大小 -->
                    <th class="width-300">Action</th>
                </tr>
            </table>
        </div>
        <div class="table-data-wrap">
            <table class="data" cellpadding="0" cellspacing="0" border="1" bordercolor="#d8d8d8">
                
                <tr>
                    <td class="width-50"><input type="checkbox"></td>
                    <td class="width-150">888_6666666</td>
                    <td class="width-150">wwwwwwwwwwww</td>
                    <td class="width-150">184654654645645</td>
                    <td class="width-150">666679879849498489489489</td>
                    <td class="width-150">5555</td>
                    <td class="width-300">
                        <table class="action-sheet" height=30 cellpadding="0" cellspacing="0">
                            <tr>
                                <td><img class="action-accept-icon">接受</td>
                                <td><img class="action-refuse-icon">拒绝</td>
                                <td><img class="action-save-as-icon">另存</td>
                                <td><img class="action-cover-icon">覆盖</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                
<!--
                <script>
                    for (var i = 0; i < 21; i++) {
                        document.write("<tr> \
                                            <td class='width-50'><input type='checkbox'></td> \
                                            <td class='width-150'>888_6666666</td> \
                                            <td class='width-150'>wwwwwwwwwwww</td> \
                                            <td class='width-150'>184654654645645</td> \
                                            <td class='width-150'>666679879849498489489489</td> \
                                            <td class='width-150'>5555</td> \
                                            <td class='width-ud'> \
                                                <table class='action-sheet' height=30 cellpadding='0' cellspacing='0'> \
                                                    <tr> \
                                                        <td><img class='action-show-icon'>显示</td> \
                                                        <td><img class='action-del-icon'>删除</td> \
                                                    </tr> \
                                                </table> \
                                            </td> \
                                        </tr>");
                    }
                </script>
-->
            </table>
        </div>

        <!-- 如果要隐藏就class加 hidden即可 -->
        <div class="multi-del-wrap">
            <input type="checkbox" id="select-all-element"><label for="select-all-element" class="button">所有元素 (3666)</label>
            <div id="multi-delete" class="button">
                <img class="multi-del-icon">删除
            </div>
        </div>

        <div class="rows-perpage-wrap">
            <select id="rows-perpage-select">
                <option value="15">15</option><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option>
                <option value="150">150</option><option value="200">200</option>
            </select>
            <label>每页显示条数</label>
        </div>
    </div>
</main>

</body>

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/Ecalendar.jquery.min.js"></script>
<script src="/js/vendor/common.js"></script>
<script src="/js/vendor/page-control.js"></script>
<script src="/js/vendor/drone-filter.js"></script>
<script>
    var pageC = new PageControl("#data-wrap", 1, 200);
    pageC.refresh();
    pageC.pageDidChanged = function (page) {
        console.log("页面改变了  " + page);
    }

    $(function(){
        $("#flight-date-start").ECalendar({
            type:"time",   //模式，time: 带时间选择; date: 不带时间选择;
            stamp : false,   //是否转成时间戳，默认true;
            offset:[0,2],   //弹框手动偏移量;
            format:"yyyy/MM/dd",   //时间格式 默认 yyyy-mm-dd hh:ii;
            skin:3,   //皮肤颜色，默认随机，可选值：0-8,或者直接标注颜色值;
            step:10,   //选择时间分钟的精确度;
            callback:function(v,e){} //回调函数
        });

        $("#flight-date-end").ECalendar({
            type:"time",   //模式，time: 带时间选择; date: 不带时间选择;
            stamp : false,   //是否转成时间戳，默认true;
            offset:[-86,2],   //弹框手动偏移量;
            format:"yyyy/MM/dd",   //时间格式 默认 yyyy-mm-dd hh:ii;
            skin:3,   //皮肤颜色，默认随机，可选值：0-8,或者直接标注颜色值;
            step:10,   //选择时间分钟的精确度;
            callback:function(v,e){} //回调函数
        });
    });
</script>


</html>






